<template>
  <f7-page>
    <f7-navbar title="吉林动画学院用章申请表"></f7-navbar>

    <f7-list form>
      <f7-list-item>
        <f7-label>名称</f7-label>
        <f7-input type="text" :value="formContent.title" @input="formContent.title = $event.target.value" ></f7-input>
      </f7-list-item>
      <f7-list-item  >
        <f7-label>申请部门</f7-label>
        <f7-input type="select" placeholder="Please choose..." :value="formContent.orgName"
                  @input="formContent.orgName = $event.target.value">
          <option value="动画工程中心" selected>动画工程中心</option>
        </f7-input>
      </f7-list-item>
      <f7-list-item  >
        <f7-label>用印数</f7-label>
        <f7-input  type="tel" placeholder="" clear-button :value="formContent.usageCount"
                       @input="formContent.usageCount = $event.target.value"></f7-input>
      </f7-list-item>
      <f7-list-item >
        <f7-label>印章类别</f7-label>
        <f7-input type="select" placeholder="Please choose..." :value="formContent.sealType"
                  @input="formContent.sealType = $event.target.value">
          <option v-for="(value, index) in sealNum" v-bind:key="index" v-bind:value="index">{{value}}</option>

        </f7-input>
      </f7-list-item>
      <f7-list-item >
        <f7-label>备注</f7-label>
        <f7-input type="textarea" placeholder="Input here please" :value="formContent.remark"
                  @input="formContent.remark = $event.target.value"></f7-input>
      </f7-list-item>
    </f7-list>

    <f7-block strong>
      <f7-row>
        <f7-col width="50">
          <f7-button fill raised @click="submitApply">提交</f7-button>
        </f7-col>
        <f7-col width="50">
          <f7-button fill raised back>取消</f7-button>
        </f7-col>

      </f7-row>
    </f7-block>


  </f7-page>
</template>

<script>
  export default {
    name: "applySealTable",
    data() {
      return {
        sealNum: this.GLOBAL.sealNum,
        pastMemory: {},
        formContent: {
          title: "吉林动画学院用章申请表",
          createBy: sessionStorage.getItem('userName'),
          usageCount: 1,
          sealTypeName: "",
          sealType: 1,
          sealAdministrator: "",
          remark: "",
          orgName: "动画工程中心",
          orgId: 20769,
          generalManager: "",
          departmentHead: "",
          auditResult: "流程尚未启动",
        }
      }
    },
    created() {
      this.$f7ready((f7) => {
        let that = this;
        f7.request.setup({
          headers: {
            'AccessToken': sessionStorage.getItem('accessToken'),
            'JSESSIONID': sessionStorage.getItem('userToken'),
          }
        });
        f7.request.json(that.GLOBAL.RequestAddress + '/camel/rest/sealapplys', {
          'page': 1,
          'limit': 10,
          'jsonStr': '',
          'otherStr': '',
          'start': '0'
        }, function (result) {
          if (result.totalCount > 0) {
            for (let pm of result.data) {
              if (pm.id == that.$f7route.params.id) {
                that.pastMemory = pm;
                break;
              }
            }
            if (Object.keys(that.pastMemory).length === 0) {
              return;
            } else {
              that.formContent.title = that.pastMemory.title;
              that.formContent.usageCount = that.pastMemory.usageCount;
              that.formContent.orgName = that.pastMemory.orgName;
              that.formContent.orgId = that.pastMemory.orgId;
              that.formContent.sealTypeName = that.pastMemory.sealTypeName;
              that.formContent.sealType = that.pastMemory.sealType;
              that.formContent.sealAdministrator = that.pastMemory.sealAdministrator;
              that.formContent.remark = that.pastMemory.remark;
              that.formContent.generalManager = that.pastMemory.generalManager;
              that.formContent.departmentHead = that.pastMemory.departmentHead;
            }
            ;
          }
        })
      });
    },
    methods: {
      submitApply: function (event) {
        let that = this;
        let ff = that.formContent;
        let app = that.$f7

        if(that.checkValidate() == false) {
          return
        }
        if (Object.keys(that.pastMemory).length === 0) {
          app.request.postJSON(that.GLOBAL.RequestAddress + '/camel/rest/sealapplys', ff, function (result) {
            that.showAlert("提示", result.msg)
          }, function(err ) {
            app.dialog.alert("添加新纪录异常，请重新添加", "提示");
          });
        } else {
          ff.id = that.pastMemory.id;
          let url = that.GLOBAL.RequestAddress + '/camel/rest/sealapplys/' + that.pastMemory.id;
          that.putRequest(url, ff);
        }
      },
      showAlert: function (title, text) {
        let that = this;
        let app = that.$f7;
        app.dialog.alert(text, title, () => {
          that.$f7router.back();
        });
      },
      putRequest: function (url, cargo) {
        let that = this;
        fetch(url,
          {method: "put",
            headers: {
              "Content-Type": "application/json;charset=UTF-8",
              'AccessToken': sessionStorage.getItem('accessToken'),
              'JSESSIONID': sessionStorage.getItem('userToken'),
            },
            body: JSON.stringify(cargo)
          }).then (response => response.json())
          .then(  result => {
            console.log(result)
            that.showAlert("提示", result.msg)
          }).catch(function(err){
          console.log("Fetch错误",err)
        });
      },
      checkValidate: function () {
        let that = this;
        let app = that.$f7;

        if(that.formContent.usageCount < 1) {
          app.dialog.alert("用印数必须大于1，请重新填写", "提示", null);   return false
        }
        return true;
      },

    },
  }
</script>

<style scoped>

</style>
